ReactNative SafeAreaViewを使ってスマホヘッダーとコンテンツの表示被りを防ぐ
https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F595437%2F24e599bc-0a13-3a57-d24c-df40a2e8f995.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&w=1400&fit=max&s=2345522fa0d7ad88357ebe424ff03a74https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F595437%2F3fa61d17-1654-0f2e-6103-6b33db7c8051.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&w=1400&fit=max&s=b4307f9ffb81f366fe29a2026980ebc3
概要
初めてスマホ開発すると、コンテンツがiPhoneなどのヘッダーに被ってしまって、表示が見えにくくなる問題に当たる。
ReactNativeでこれを防ぐには、SafeAreaViewを使うと良い。
説明
SafeAreaViewは、デバイスのセーフエリア境界内にコンテンツをレンダリングします。
現在、iOSバージョン11以降を搭載したiOSデバイスにのみ適用されます。
SafeAreaViewコンポーネント使用することでステータスバーにコンテンツが被ることなくレンダリングされます。
iOSだけか...Android持ってないから実際の感じがわからんな
使い方
code: App.js
import {SafeAreaView} from 'react-native';
const App = () => {
return (
<SafeAreaView>
<View>
コンテンツ
</View>
</SafeAreaView>
)
}
注意
SafeAreaViewのすぐ下に1つ<View>を挟んでおくと安全
コンテンツでオーバーレイ表示とかある場合、SafeAreaViewを無視して表示されることある
例えば以下のようなコードだとSafeAreaViewを突き抜ける
code: sample.ng.js
const App = () => {
return (
<SafeAreaView>
<Text style={{zIndex:1, position: 'absolute'}}>hogehogehoge</Text>
</SafeAreaView>
)
}
一枚<View>を噛ませとけば、そんなことにはならない
code: sample.ok.js
const App = () => {
return (
<SafeAreaView>
<View style={{flex:1}}>
<Text style={{zIndex:1, position: 'absolute'}}>hogehogehoge</Text>
</View>
</SafeAreaView>
)
}
参考